<template>
    <div class="padding20">
        <!--条件查询-->
        <el-form :model="queryParam" label-position="left" label-width="70px" size="small">
            <el-row :gutter="50" justify="start">
                <el-col :xs="12" :sm="7">
                    <el-form-item label-width="80px" label="查询日期:">
                        <el-date-picker
                                v-model="queryParam.time"
                                style="width: 100%"
                                type="month"
                                value-format="yyyy-MM-dd"
                                placeholder="选择月">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :xs="12" :sm="7">
                    <el-form-item label-width="80px" label="行业类别:">
                        <el-cascader clearable style="width: 100%"
                                     v-model="queryParam.industryId"
                                     :options="industryList"
                                     :props="{value:'id', label: 'name'}"
                                     :show-all-levels="false"/>
                    </el-form-item>
                </el-col>
                <el-col :xs="12" :sm="7">
                    <el-form-item label-width="80px" label="企业性质:">
                        <el-select clearable style="width: 100%" v-model="queryParam.unitType" multiple
                                   placeholder="企业性质">
                            <el-option
                                    v-for="item in unitTypeS"
                                    :key="item"
                                    :label="item"
                                    :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :xs="12" :sm="7">
                    <el-form-item label-width="80px" label="企业规模:">
                        <el-select clearable style="width: 100%" v-model="queryParam.companyScale" placeholder="企业规模">
                            <el-option
                                    v-for="item in companyScaleS"
                                    :key="item"
                                    :label="item"
                                    :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <!--展开/收起-->
                <el-col :xs="showMoreSearch?24:13" :sm="showMoreSearch?24:7">
                    <div style="float: left;overflow: hidden;">
                        <el-button size="small" @click="selectPage" type="primary">查询</el-button>
                        <el-button size="small" @click="clearParam">重置</el-button>
                    </div>
                </el-col>
            </el-row>
        </el-form>

        <!--操作按钮-->
        <div class="mi-container">
            <el-button size="mini" class="mi-item" type="primary" icon="el-icon-folder-opened" @click="exportExcel()">
                导出Excel
            </el-button>
        </div>
        <!--        :summary-method="getSummaries"-->
        <!--表格数据-->
        <el-table empty-text="当前条件下，暂无匹配数据" :data="tableData"
                  :show-summary="true"
                  border fit style="width: 100%;"

                  highlight-current-row show-overflow-tooltip
                  @selection-change="selectionChange">
            <el-table-column label="日期" align="center">
                <template slot-scope="scope">
                    {{scope.row.dataMonth | subStr(-3)}}
                </template>
            </el-table-column>
            <el-table-column label="公司名" align="center">
                <template slot-scope="scope">
                    {{scope.row.name | nullFilter}}
                </template>
            </el-table-column>
            <el-table-column sortable prop="realWorkCount" label="本期实际招工人员数" align="center">
                <template slot-scope="scope">
                    {{scope.row.realWorkCount | nullFilter}}
                </template>
            </el-table-column>
            <el-table-column sortable prop="beforeMonthEndWorkCount" label="上月末从业人员数" align="center">
                <template slot-scope="scope">
                    {{scope.row.beforeMonthEndWorkCount | nullFilter}}
                </template>
            </el-table-column>
            <el-table-column sortable prop="thisMonthLackCount" label="本月缺工人数" align="center">
                <template slot-scope="scope">
                    {{scope.row.thisMonthLackCount | nullFilter}}
                </template>
            </el-table-column>
            <el-table-column sortable prop="thisMonthLessCount" label="本月减员人员数" align="center">
                <template slot-scope="scope">
                    {{scope.row.thisMonthLessCount | nullFilter}}
                </template>
            </el-table-column>
            <el-table-column sortable prop="thisMonthEndWorkCount" label="月末从业人员数" align="center">
                <template slot-scope="scope">
                    {{scope.row.thisMonthEndWorkCount | nullFilter}}
                </template>
            </el-table-column>
            <el-table-column label="描述" align="center">
                <template slot-scope="scope">
                    {{scope.row.des | nullFilter}}
                </template>
            </el-table-column>
        </el-table>

        <!--分页插件-->
        <Pagination @pagination="selectPage"
                    v-show="pageParam.pages>0"
                    :total-data-num="pageParam.total"
                    :current-page="pageParam.current"
                    :page-size="pageParam.size"/>

        <!--导出数据使用-->
        <el-table
                v-show="false"
                v-if="outTableIf"
                :data="outTableData"
                id="out-table"
                :show-summary="true"
                border fit style="width: 100%;"
                highlight-current-row show-overflow-tooltip
                @selection-change="selectionChange">
            <el-table-column label="日期" align="center">
                <template slot-scope="scope">
                    {{scope.row.dataMonth | subStr(-3)}}
                </template>
            </el-table-column>
            <el-table-column label="公司名" align="center">
                <template slot-scope="scope">
                    {{scope.row.name | nullFilter}}
                </template>
            </el-table-column>
            <el-table-column sortable prop="realWorkCount" label="本期实际招工人员数" align="center">
                <template slot-scope="scope">
                    {{scope.row.realWorkCount | nullFilter}}
                </template>
            </el-table-column>
            <el-table-column sortable prop="beforeMonthEndWorkCount" label="上月末从业人员数" align="center">
                <template slot-scope="scope">
                    {{scope.row.beforeMonthEndWorkCount | nullFilter}}
                </template>
            </el-table-column>
            <el-table-column sortable prop="thisMonthLackCount" label="本月缺工人数" align="center">
                <template slot-scope="scope">
                    {{scope.row.thisMonthLackCount | nullFilter}}
                </template>
            </el-table-column>
            <el-table-column sortable prop="thisMonthLessCount" label="本月减员人员数" align="center">
                <template slot-scope="scope">
                    {{scope.row.thisMonthLessCount | nullFilter}}
                </template>
            </el-table-column>
            <el-table-column sortable prop="thisMonthEndWorkCount" label="月末从业人员数" align="center">
                <template slot-scope="scope">
                    {{scope.row.thisMonthEndWorkCount | nullFilter}}
                </template>
            </el-table-column>
            <el-table-column label="描述" align="center">
                <template slot-scope="scope">
                    {{scope.row.des | nullFilter}}
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script lang="ts">
    import {Component} from 'vue-property-decorator'
    import {mixins} from "vue-class-component";
    import BaseVue from "@/core/mixin/BaseVue";
    import Kit from "@/core/mixin/Kit";
    import $http from "@/core/utils/http";
    import {API} from "@/core/api/API";
    import {getStorage} from "@/core/utils/storage";
    import {errorMsg, warningMsg} from "@/core/utils/message";
    import {copy, isBlank, tree} from "@/core/utils/Utils";
    import Pagination from "@/components/Pagination/Pagination.vue";
    import XLSX from "xlsx";
    import FileSaver from "file-saver";
    import {subStr} from "@/core/filters";
    import {closeLoading, showLoading} from "@/core/utils/loading";

    @Component({
        name: 'DynamicHumanTable',
        components: {Pagination},
    })
    export default class DynamicHumanTable extends mixins(BaseVue, Kit) {
        //查询条件
        queryParam: any = {time: getStorage("nowDate")}

        //企业规模
        companyScaleS: any = getStorage("companyScale");
        //企业性质
        unitTypeS: any = getStorage("companyType");
        //行业类别
        industryList: any = [];

        // 获取行业类型数据
        async getIndustryTypeList() {
            return $http.post(API.industryTypeList, {}).then((res: any) => {
                if (res.success) {
                    this.industryList = tree(res.data);
                } else {
                    errorMsg("行业类型数据获取失败");
                }
                return res;
            });
        }


        //初始化
        async mounted() {
            await this.getIndustryTypeList();
            this.selectPage();
        }

        //查询分页
        selectPage(page: any = null) {
            if (isBlank(this.queryParam.time)) {
                warningMsg("请选择查询日期");
                return;
            }
            this.pageData(API.dynamicHumanInfoStatisticsTablePage, page);
            // .then((res: any) => {
            //     setStorage("m_b_data_a", this.tableData)
            // })
        }

        //重新获取焦点
        activated() {
        }

        //失去焦点
        deactivated() {
        }


        /**
         * excel导出
         * @param outTableIf 使用时设置为true，使用后设置为false
         * @param outTableData 导出的数据，导出时需要给延时
         */
        outTableIf = false;
        outTableData = [];

        exportExcel() {
            if (isBlank(this.queryParam.time)) {
                warningMsg("请选择查询日期");
                return;
            }

            showLoading("正在导出excel...")
            this.outTableIf = true;
            let queryParam = copy(this.queryParam);
            queryParam.type = "all_export"
            $http.post(API.dynamicHumanInfoStatisticsTablePage, queryParam)
                .then((res: any) => {
                    showLoading("正在导出excel...")
                    this.outTableData = res.data;
                    setTimeout(() => {
                        let fileName = this.queryParam.time ? '用工动态统计表' + subStr(this.queryParam.time, -3) + '.xlsx' : '用工动态统计表.xlsx';
                        // 转换成excel时，使用原始的格式，解决数字列自动转科学计数法问题
                        let xlsxParam = {raw: true};
                        // out-table关联导出的dom节点
                        let wb = XLSX.utils.table_to_book(document.querySelector('#out-table'), xlsxParam);
                        // 获取二进制字符串作为输出
                        let wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: true, type: 'array'});
                        try {
                            FileSaver.saveAs(new Blob([wbout], {type: 'application/octet-stream'}), fileName);
                        } catch (e) {
                            //console.log(e)
                        }
                        this.outTableIf = false;
                        this.outTableData = [];
                        closeLoading()
                    }, 2000)
                });
        }

    }

</script>

<style scoped type="scss">
</style>


